<template>
  <view class="component-container" :style="{ height: visible ? '100vh' : '0vh' }" @click="closePopup">
    <view
      @click.prevent="() => {}"
      :class="['content', radiusClass]"
      :style="{ height: visible ? props.height : '0%' }"
    >
      <view class="content-rol">
        <slot name="content"> </slot>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  position: {
    type: String,
    default: 'bottom'
  },
  height: {
    type: String,
    default: '50%'
  },
  radiusSize: {
    type: String,
    default: '30rpx'
  },
  transparency: {
    type: String,
    default: '50%'
  },
  background: {
    type: String,
    default: '#fff'
  }
})
const emits = defineEmits<{
  (e: 'update:visible', newVal: boolean): void
}>()
function closePopup() {
  emits('update:visible', false)
}
const radiusClass = computed(() => {
  if (props.visible) {
    return props.position === 'bottom' ? 'positionBottom' : 'positionTop'
  } else {
    return props.position === 'bottom' ? 'positionBottomClose' : 'positionTopClose'
  }
})
// 给style使用的变量
const radiusSize = props.radiusSize
const transparency = props.transparency
</script>

<style scoped lang="scss">
$radius-size: v-bind(radiusSize);

.component-container {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10000;
  background-color: rgb(0 0 0 / v-bind(transparency));

  .content {
    position: fixed;
    width: 100vw;
    height: 0%;
    background-color: v-bind(background);
    transition: all 0.4s;

    .content-rol {
      position: absolute;
      inset: 0;
      overflow: auto;
    }
  }

  .positionTop {
    top: 0;
    border-bottom-right-radius: $radius-size;
    border-bottom-left-radius: $radius-size;
  }

  .positionBottom {
    bottom: 0;
    border-top-right-radius: $radius-size;
    border-top-left-radius: $radius-size;
  }

  .positionTopClose {
    top: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .positionBottomClose {
    bottom: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
  }
}
</style>
